<!-- 知识库创建类型 -->

<template>
  <el-dialog :destroy-on-close="true" v-model="visible" :title="`${!type ? '创建' : '编辑'}知识`" width="30%">

    <!--知识库from -->
    <el-form ref="ruleFormRef" :model="d.form" label-position="top">
      <div class="avatar-uploader">
        <img :src="base_2" class="avatar" />

      </div>

      <el-form-item prop="baseName" label="知识名称" :rules="[
        { required: true, message: '请输入知识名称' },
      ]">
        <el-input v-model="d.form.baseName" autocomplete="off" placeholder="请输入知识名称" />
      </el-form-item>
      <el-form-item label="知识描述">
        <el-input v-model="d.form.desc" type="textarea" placeholder="请输入知识描述" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button v-if="!type" type="danger" @click="submitForm(ruleFormRef)">
          创建
        </el-button>
        <el-button v-else type="danger" @click="submitEditForm(ruleFormRef)">
          编辑
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { inject, ref, reactive, onMounted } from 'vue'
import base_2 from "@/assets/docs/base_2.svg";
const emits = defineEmits(['editDpData'])
interface Props {
  editData?: any
  type?: string
}

const props = defineProps<Props>()


const visible = inject("visible");
const ruleFormRef = ref()

// 云模型from
const d = reactive({
  form: {
    imageUrl: '',
    baseName: '',
    desc: '',
  }
})

onMounted(() => {
  if (props.editData) {
    d.form = props.editData
  }
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log(valid, d.form, 'submit!')
    } else {
      console.log('error submit!')

      return false
    }
  })
}
// 编辑提交
const submitEditForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log(valid, d.form, 'submit!')
      emits('editDpData', d.form)
    } else {
      console.log('error submit!')

      return false
    }
  })
}

</script>
<style scoped>
.avatar-uploader {
  text-align: center;
  margin-bottom: 20px;
}
</style>
